<div class="transform-grid">
  <!-- <div class="pullLeft" > -->
    <dx-tree-list 
      #leftTree 
      [allowColumnResizing]='true'  
      columnResizingMode="widget" 
      [autoExpandAll]='true' 
      noDataText="暂无数据"
      [showRowLines]="true" 
      [showBorders]="true" 
      keyExpr='Id' 
      [selectedRowKeys]='keys'
      [dataSource]='leftSource'>
      <dxo-selection mode="multiple" recursive="true"></dxo-selection>
      <dxi-column width='100' dataField="text" caption="证书类型"></dxi-column>
    </dx-tree-list>
  <!-- </div> -->
  <div class="pullLeft btn">
    <dx-button
      text="新增"
      type="success"
      (click)="add()">
    </dx-button>
    <dx-button
      text="移除"
      type="success"
      (click)="remove()">
    </dx-button>    
  </div>
    <dx-tree-list 
      #rightTree   
      [allowColumnResizing]='true'  
      columnResizingMode="widget" 
      [autoExpandAll]='true' 
      noDataText="暂无数据"
      [showRowLines]="true" 
      [showBorders]="true" 
      keyExpr='Id' 
      [dataSource]='rightSource'>
      <dxo-selection mode="multiple" recursive="true"></dxo-selection>
      <dxi-column width='100' dataField="text" caption="已选择证书"></dxi-column>
    </dx-tree-list>
</div>